<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        #app {
            width: 810px;
            height: 400px;
            margin: 0px auto;
        }

        .div1 {

            width: 400px;
            float: left;
            height: 400px;
        }

    </style>
</head>
<body>

<div id="app">
    <el-divider><i class="el-icon-mobile-phone"></i>基本信息</el-divider>
    <span style="color:#98999b; margin: 10px 80px;">店铺头像</span>
    <form id="bar" enctype="multipart/form-data" style="margin: 5px 100px;">
        <input type="hidden" v-model="businessInfo.id" name="id" />
        <img :src="businessInfo.bicon" width="150px" height="150px" id="haha" style="border-radius: 150px;border: 1px solid black" />
        <input width="100px" name="pic" type="file" id="pic" />
    </form>
    <el-form :model="businessInfo" status-icon :rules="rules" ref="businessInfo" label-width="100px"
             class="demo-ruleForm">
        <div class="div1">
            <el-form-item label="姓名" prop="bname">
                <el-input style="width: 200px;" readonly="readonly" v-model="businessInfo.bname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="telephone">
                <el-input style="width: 200px;" readonly="readonly" v-model="businessInfo.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="支付宝账号" prop="payaccount">
                <el-input style="width: 200px;" v-model="businessInfo.payaccount" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入驻时间" prop="enterdate">
                <el-input style="width: 200px;" readonly="readonly" v-model="businessInfo.enterdate" autocomplete="off"></el-input>
            </el-form-item>
           <!-- <el-form-item label="余额" prop="money">
                <el-input style="width: 200px;" readonly="readonly" v-model="businessInfo.money" autocomplete="off"></el-input>
            </el-form-item>-->
        </div>
        <div class="div1">
            <el-form-item label="身份证正面照" prop="cardfront">
                <img :src="businessInfo.cardfront" readonly="readonly" class="img-circle" style="width: 130px; height: 110px;">
            </el-form-item>
            <el-form-item label="身份证反面照" prop="cardreverse">
                <img :src="businessInfo.cardreverse" readonly="readonly" class="img-circle" style="width: 130px; height: 110px;">
            </el-form-item>
            <el-form-item>
                <el-button type="primary" id="foo">提交</el-button>
            </el-form-item>
        </div>
    </el-form>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            businessInfo:{},
            bid:0,
            rules:{
                payaccount:[
                    {
                        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                        message: '请输入正确支付宝账号',
                        trigger: 'blur'
                    }
                ]
            }
        },
        methods:{
        }
    });
    $.get("/cai/consumer/getBid",function (backData) {
        app.bid = backData.data;
        $.get("/cai/business/listInfo/"+app.bid,function (listBackData) {
            app.businessInfo = listBackData.data;
        })
    });
    pic.onchange=function(){
        var r=new FileReader();
        r.readAsDataURL(pic.files[0]);
        r.onload=function(){
            haha.src=r.result;
        }
    };
    foo.onclick=function(){

        var businessData=new FormData(bar);

        $.ajax({
            url: "/cai/business/uploadBicon",
            type: "POST",
            data: businessData,
            processData: false,
            contentType: false,
            success: function(data) {
                if(data.code == 1){
                    update();
                }
            }
        });
    }
    function update() {
        $.post("/cai/business/updateInfo",app.businessInfo,function (backData) {
            if(backData.code == 1){
                app.$notify({
                    title: '成功提示',
                    message: backData.msg,
                    type: 'success'
                });
            }else {
                app.$notify.error({
                    title: '错误提示',
                    message: backData.msg
                });
            }
        });
    }
</script>
</body>
</html>